<template>
  <div class="personnel_list">
    <div class="search">
      <p :class="[letterSearch ? 'active' : '', 'p1']"
         @click="onSearchWay('letterSearch')">
        Search by last name:
      </p>
      <transition name="switchOptions">
        <ul v-if="letterSearch"
            class="alphabet clearfloat">
          <li :class="[{ active: item.ifActive }, 'alphabet_item']"
              v-for="(item, index) in alphabet"
              :key="index"
              @click="onAlphabet(index)">
            {{ item.text }}
          </li>
        </ul>
      </transition>
      <p :class="[conditionsSearch ? 'active' : '', 'p2']"
         @click="onSearchWay('conditionsSearch')">
        Query by condition:
      </p>
      <transition name="switchOptions">
        <div class="input_box"
             v-if="conditionsSearch">
          <div class="input_item">
            <span>Name</span>
            <div class="input">
              <input type="text"
                     v-model="name"
                     placeholder />
            </div>
          </div>
          <div class="input_item">
            <span>Position</span>
            <el-select v-model="staff_value"
                       placeholder="Please select"
                       @change="handleChange1">
              <el-option v-for="item in staff_cate"
                         :key="item.id"
                         :label="item.title"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="input_item">
            <span>Office</span>
            <el-select v-model="office_value"
                       placeholder="Please select"
                       @change="handleChange2">
              <el-option v-for="item in office_cate"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="input_item">
            <span>Practice Area</span>
            <el-select v-model="service_value"
                       placeholder="Please select"
                       @change="handleChange3">
              <el-option v-for="item in service_cate"
                         :key="item.id"
                         :label="item.title"
                         :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </transition>
      <transition name="switchOptions">
        <div class="submit"
             v-if="conditionsSearch"
             @click="onsearch">
          Search
        </div>
      </transition>
    </div>

    <div class="personnel_info">
      <router-link v-for="(item, index) in list"
                   :key="index"
                   :to="{ name: 'en_personnel_details', query: { id: item.id } }"
                   class="personnel_item">
        <!-- <div class="img">
          <div
            class="imgBox"
            :style="{ backgroundImage: 'url(' + item.image_input + ')' }"
          ></div>
        </div> -->
        <el-image class="img"
                  :src="item.image_input"
                  fit="cover"> </el-image>
        <div class="personnel_abstract">
          <div class="abstract_top clearfloat">
            <h1 class="info_name">{{ item.title }}</h1>
            <div class="info_type">{{ item.sc_title }}</div>
            <div class="location">
              <img src="@/assets/images/location.png"
                   alt />
              <span>{{ item.o_name }}</span>
            </div>
          </div>
          <div class="business">
            <span>Practice Area:</span>
            <span v-for="(i, index) in item.service_cid_list"
                  :key="index">{{
              i.title
            }}</span>
          </div>
          <div class="introduce">
            <h3>Experience：</h3>
            <p>{{ item.synopsis }}</p>
          </div>
        </div>
      </router-link>
      <el-pagination :page-size="10"
                     :total="count"
                     background
                     layout="prev, pager, next"
                     @current-change="changePage"
                     :current-page.sync="currentPage"></el-pagination>
    </div>
  </div>
</template>
<script>
import { service_cate1 } from '@/api/field.js'
import { office_list } from '@/api/contactUs.js'
import { staff_list, staff_cate } from '@/api/personnel.js'
export default {
  name: 'personnel_list',
  data() {
    return {
      letterSearch: true, // 按字母搜索
      conditionsSearch: false, //按条件搜索
      list: [],
      count: 0, //数据总长度
      currentPage: 1, //当前分页页数
      alphabet: [
        { id: 1, text: 'A', ifActive: false },
        { id: 2, text: 'B', ifActive: false },
        { id: 3, text: 'C', ifActive: false },
        { id: 4, text: 'D', ifActive: false },
        { id: 5, text: 'E', ifActive: false },
        { id: 6, text: 'F', ifActive: false },
        { id: 7, text: 'G', ifActive: false },
        { id: 8, text: 'H', ifActive: false },
        { id: 9, text: 'I', ifActive: false },
        { id: 10, text: 'J', ifActive: false },
        { id: 11, text: 'K', ifActive: false },
        { id: 12, text: 'L', ifActive: false },
        { id: 13, text: 'M', ifActive: false },
        { id: 14, text: 'N', ifActive: false },
        { id: 15, text: 'O', ifActive: false },
        { id: 16, text: 'P', ifActive: false },
        { id: 17, text: 'Q', ifActive: false },
        { id: 18, text: 'R', ifActive: false },
        { id: 19, text: 'S', ifActive: false },
        { id: 20, text: 'T', ifActive: false },
        { id: 21, text: 'U', ifActive: false },
        { id: 22, text: 'V', ifActive: false },
        { id: 23, text: 'W', ifActive: false },
        { id: 24, text: 'X', ifActive: false },
        { id: 25, text: 'Y', ifActive: false },
        { id: 26, text: 'Z', ifActive: false },
      ],
      name: '',
      staff_cate: [], //职务分类
      staff_value: '',
      office_cate: [], //办公地点
      office_value: '',
      service_cate: [], //业务领域分类
      service_value: '',
      equipment: '', // 移动端 || PC端
    }
  },
  watch: {
    '$store.state.headTitle.equipment': {
      deep: true,
      handler: function (newValue, oldValue) {
        if (newValue == 'pc') {
          this.letterSearch = true
          this.conditionsSearch = true
        } else {
          this.letterSearch = true
          this.conditionsSearch = false
        }
        this.equipment = newValue
        // this.$refs.swiper.update();
      },
    },
  },
  created() {
    if (this.$store.state.headTitle.equipment == 'pc') {
      this.letterSearch = true
      this.conditionsSearch = true
    } else {
      this.letterSearch = true
      this.conditionsSearch = false
    }
    this.equipment = this.$store.state.headTitle.equipment
  },
  mounted() {
    this.getAll()
  },
  methods: {
    async getAll() {
      let state = this.$store.state.headTitle
      if (state.positionCateEN.length < 1) {
        //获取职务分类
        staff_cate().then((res) => {
          this.staff_cate = res.data.data.EN
          this.$store.commit('changePositionCateEN', res.data.data.EN)
        })
      } else {
        this.staff_cate = state.positionCateEN
      }
      if (state.placeCateEN.length < 1) {
        //获取办公地点
        office_list({ field: 1 }).then((res) => {
          this.office_cate = res.data.data.EN
          this.$store.commit('changePlaceCateEN', res.data.data.EN)
        })
      } else {
        this.office_cate = state.placeCateEN
      }

      if (state.businessCateEN.length < 1) {
        //获取业务领域分类
        service_cate1().then((res) => {
          this.service_cate = res.data.data.EN

          this.$store.commit('changeBusinessCateEN', res.data.data.EN)

          // 获取默认数据列表
        })
      } else {
        this.service_cate = state.businessCateEN
      }
      await this.getList()
    },
    getList(cid, office_id, service_cid, lettre, title) {
      staff_list({
        page: this.currentPage || 1,
        limit: 10,
        cid: cid || null,
        office_id: office_id || null,
        service_cid: service_cid || null,
        lettre: lettre || null,
        title: title || null,
      }).then((res) => {
        if (res.data.data.length < 1) {
          return this.$message('No search results were found')
        }
        res.data.data.map((item) => {
          item.service_cid_list = new Array()
          let service_arr = item.service_cid.split(',')
          service_arr.map((i) => {
            let cateName = this.service_cate.find((j) => {
              return j.id == i
            })
            if (cateName) {
              item.service_cid_list.push(cateName)
            }
          })
        })

        this.list = res.data.data
        this.count = res.data.count
      })
    },
    //点击字框
    onAlphabet(index) {
      let currentItem = this.alphabet[index]
      var currentAlphabet = ''

      let ifChoice = this.alphabet.findIndex((item) => item.ifActive == true)

      if (ifChoice != -1 && ifChoice != index) {
        this.alphabet.map((item) => {
          item.ifActive = false
        })
        this.$set(this.alphabet[index], 'ifActive', true)
        currentAlphabet = this.alphabet[index].text
      } else {
        if (currentItem.ifActive) {
          currentAlphabet = null
          this.$set(this.alphabet[index], 'ifActive', false)
        } else {
          this.$set(this.alphabet[index], 'ifActive', true)
          currentAlphabet = this.alphabet[index].text
        }
      }
      this.currentAlphabet = currentAlphabet

      if (this.equipment == 'mobile') {
        this.staff_value = null
        this.office_value = null
        this.service_value = null
        this.getList(null, null, null, currentAlphabet)
      }
    },
    //改变分页
    changePage(page) {
      if (this.equipment == 'mobile') {
        if (this.letterSearch) {
          this.getList(null, null, null, this.currentAlphabet)
        } else if (this.conditionsSearch) {
          this.getList(
            this.staff_value,
            this.office_value,
            this.service_value,
            null,
            this.name
          )
        }
      } else {
        this.getList(
          this.staff_value,
          this.office_value,
          this.service_value,
          this.currentAlphabet,
          this.name
        )
      }
    },
    //选择框改变
    handleChange1(value) {
      if (this.equipment == 'mobile') {
        this.currentAlphabet = null
      }
    },
    handleChange2(value) {
      if (this.equipment == 'mobile') {
        this.currentAlphabet = null
      }
    },
    handleChange3(value) {
      if (this.equipment == 'mobile') {
        this.currentAlphabet = null
      }
    },
    onSearchWay(string) {
      if (this.equipment == 'pc') {
        return
      }
      if (string === 'conditionsSearch') {
        this.letterSearch = false
        this.conditionsSearch = true
      } else if (string === 'letterSearch') {
        this.letterSearch = true
        this.conditionsSearch = false
      }
    },
    // 点击搜索
    onsearch() {
      //改变当前页数
      this.currentPage = 1
      if (this.equipment == 'pc') {
        this.getList(
          this.staff_value,
          this.office_value,
          this.service_value,
          this.currentAlphabet,
          this.name
        )
      } else {
        this.getList(
          this.staff_value,
          this.office_value,
          this.service_value,
          null,
          this.name
        )
      }
    },
  },
}
</script>
<style scoped src="./sass/personnel.css"></style>
<style scoped>
.switchOptions-enter-active {
  animation: bounce-in 1s;
}
/* .switchOptions-leave-active {
  animation: bounce-in 1s reverse;
} */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
